<template>
  <!--   收入消费证明-->
  <div style="padding: 0 10px;">
    <el-row :gutter="24">
      <el-col :span="3" class="label">
        <div>
          {{ $t('收入证明') }}
        </div>
      </el-col>
      <el-col :span="9" class="item">
        <el-image
            style="height:100%;width: 100%"
            :src="data.incomeProofUrl"
            :preview-src-list="[data.incomeProofUrl]"
        ></el-image>
      </el-col>
      <el-col :span="3" class="label">
        <div>
          {{ $t('消费账单') }}
        </div>
      </el-col>
      <el-col :span="9" class="item">
        <el-image
            style="height:100%;width: 100%"
            :src="data.consumeProofUrl"
            :preview-src-list="[data.consumeProofUrl]"
        ></el-image>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {incomeConsume} from '@/api/order'
export default {
  props: ['routesQuery'],
  name: "consumptionDetails",
  data() {
    return {
      data: {},
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const {userStubId} = this.routesQuery
      const res = await incomeConsume({
        userStubId: parseInt(userStubId)
      })
      if (res.code === 1) {
        this.data = res.data ? res.data : {}
      }
    }
  }
}
</script>

<style scoped>
.label {
  height: 200px;
  background-color: #fffbed;
  border-bottom: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  height: 200px;
  border-bottom: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  box-sizing: border-box;
  padding: 15px 15px !important;
}
</style>
